<template>
  <div class="basic-table">
    <el-table
      v-bind="tableProps"
      :data="tableData"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选框列 -->
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="55"
        align="center"
      />
      <!-- 索引列 -->
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="60"
        align="center"
      />
      <!-- 动态列 -->
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column
          v-bind="column"
          :align="column.align || 'center'"
          :show-overflow-tooltip="column.showOverflowTooltip ?? true"
        >
          <!-- 自定义列模板 -->
          <template #default="scope" v-if="column.slot">
            <slot :name="column.slot" :row="scope.row" :index="scope.$index" />
          </template>
          <!-- 格式化显示 -->
          <template #default="scope" v-else-if="column.formatter">
            {{ column.formatter(scope.row, column, scope.$index) }}
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container" v-if="showPagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: () => [],
  },
  // 表格列配置
  columns: {
    type: Array,
    required: true,
  },
  // 是否显示复选框
  showSelection: {
    type: Boolean,
    default: false,
  },
  // 是否显示索引列
  showIndex: {
    type: Boolean,
    default: false,
  },
  // 是否显示分页
  showPagination: {
    type: Boolean,
    default: true,
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 总条数
  total: {
    type: Number,
    default: 0,
  },
  // 表格属性
  tableProps: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits([
  'selection-change',
  'size-change',
  'current-change',
  'update:pageSize',
  'update:currentPage',
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);

// 选中项
const selectedRows = ref([]);

// 选择项改变
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
  emit('selection-change', selection);
};

// 每页条数改变
const handleSizeChange = (val) => {
  emit('update:pageSize', val);
  emit('size-change', val);
};

// 当前页改变
const handleCurrentChange = (val) => {
  emit('update:currentPage', val);
  emit('current-change', val);
};
</script>

<style scoped>
.basic-table {
  width: 100%;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
